<template>
  <div>
    <!-- 详情头部 -->
        <div class="top-detail-container">
            <div class="top-back" @click="onClickBack">
                <van-icon name="arrow-left" size="23px" color="gray"/>
            </div>
           <div class="top-title">课程详情</div>
           <div class="top-share">
               <van-icon name="share-o" size="23px" color="gray"/>
           </div>
        </div>

    <div class="cd-info">
      <p v-html="info.course_details" class="course_details"></p>
      <i :class="info.is_collect == 0? 
        'iconfont icon-wujiaoxingxingxing'
        :'iconfont icon-wujiaoxingxingxingshoucang iconcolor'"
        @click="collect">
      </i>
      <p class="cd-free">{{ info.sale_type == 0 ? "免费" : "收费" }}</p>
      <p class="info-com">共1课时|122人报名</p>
    </div>

    <div class="cd-teachers">
      <p>教师团队</p>
      <div>
        <div v-for="(item, index) in teachers" :key="index">
          <img :src="item.avatar" alt />
          <p>{{ item.teacher_name }}</p>
        </div>
      </div>
    </div>

    <div class="cd-tro">
      <p>课程教程</p>
      <p>{{info.title}}</p>
    </div>

    <div class="cd-tro">
      <p>课程大纲</p>
      <p>{{ info.title }}</p>
    </div>

    <div class="cd-comment">
      <p>课程评价</p>
      <ul v-if="plList.length > 0">
        <li v-for="(item, index) in plList" :key="index">
          <div class="left">
            <img :src="item.avatar" alt />
          </div>
          <div class="right">
            <p>{{ item.nickname }}</p>
            <p>{{ item.content }}</p>
          </div>
        </li>
      </ul>
      <van-empty description="暂无评论" v-else />
    </div>

    <div class="bottom">
    <button @click="baoming">立即学习</button>
    </div>

  </div>
</template>

<script>
import {xwDetail,xwDetailPl,xwCollect,addCollect,downOrder} from "../../utils/http";
// import { NavBar, Empty } from "vant";
export default {
  name: "",
  data() {
    return {
      info: {},
      recommendCourse: [],
      plList: [],
      teachers: [],
    };
  },
  mounted() {
    console.log(this.$route.query.id);
    this.getDetail();
    this.getDetailPl();
  },
  methods:{
    //渲染精品课程详情
    getDetail() {
      xwDetail(this.$route.query.id).then((res) => {
        console.log(res);
        this.info = res.info;
        this.recommendCourse = res.recommendCourse;
        this.teachers = res.teachers;
      });
    },

    //渲染精品课程详情评论
    getDetailPl() {
      xwDetailPl({
        id: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.plList = res.list;
      });
    },

    // 课程详情--立即学习报名
    baoming() {
      console.log(this.info.id);
      downOrder({
        type: 2,
        shop_id: this.info.id,
      }).then((res) => {
        console.log(res);
      });
    },

    // 删除收藏
    xwCollect() {
      if (this.info.is_collect == 0) {
        addCollect({
          course_basis_id: this.$route.query.id,
          type: 1,
        }).then((res)=>{
          this.getDetail();
        });
      } else {
        xwCollect(this.info.collect_id).then((res) => {
          this.getDetail();
        });
      }
    },

    //返回上一页
    onClickBack() {
      window.history.go(-1);
    },

  },
  // components: {
  //   [NavBar.name]: NavBar,
  //   [Empty.name]: Empty,
  // },
};
</script>

<style scope>
/* 详情头部 */
.top-detail-container{
    width:100%;
    height:54px;
    border:1px solid lightgrey;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
}
.top-detail-container .top-back{
    width:10%;
    height:100%;
    display: inline-flex;
    justify-content: center;
    align-items:center;
}
.top-detail-container .top-title{
    width:80%;
     height:100%;
    display: inline-flex;
    justify-content: center;
    align-items:center;
    font-size: 20px;

}
.top-detail-container .top-share{
    width:10%;
    height:100%;
    display: inline-flex;
    justify-content: center;
    align-items:center;
}


.iconcolor {
  color: #eb6100;
}
#app {
  background: #f0f0f0;
}
.cd-info {
  background: white;
  width: 100%;
  height: 136px;
  padding: 15px;
  box-sizing: border-box;
  position: relative;
}
.cd-info i {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 22px;
}
.cd-info .cd-free {
  line-height: 32px;
  font-size: 4.53333vw;
  color: #ee1f1f;
}
.cd-info .info-com {
  font-size: 4vw;
  color: rgba(0, 0, 0, 0.45);
}
.course_details {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 305px;
  font-size: 16px;
  height: 44px;
}
.cd-teachers {
  background: white;
  margin-top: 10px;
  font-size: 4vw;
  padding: 5px 10px;
}
.cd-teachers > p {
  padding-top: 10px;
}
.cd-teachers > div {
  display: flex;
}
.cd-teachers > div > div {
  padding: 10px;
  width: 50px;
  text-align: center;
}
.cd-teachers img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
span {
  font-size: 12px;
  padding: 8px 3px;
}
.cd-tro {
  background: white;
  margin-top: 15px;
  padding: 5px 10px;
}
.cd-tro > p:nth-of-type(1) {
  padding-top: 10px;
  font-size: 4vw;
}
.cd-tro > p:nth-of-type(2) {
  font-size: 4vw;
  padding: 15px 5px;
}
.cd-comment {
  background: white;
  margin-top: 15px;
  padding: 5px 10px;
}
.cd-comment > p {
  padding-top: 10px;
  font-size: 4vw;
}
ul > li {
  padding: 10px;
  display: flex;
}
.cd-comment.left {
  width: 25px;
  height: 25px;
}
.cd-comment img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.cd-comment .right {
  margin-left: 20px;
}
button {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #eb6100;
  color: #fff;
  width: 100%;
  border: none;
  height: 44px;
}
.bottom {
  width: 100%;
  height: 50px;
}
</style>
